<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useAuth } from '@/hooks/business/auth';
import { useAuthStore } from '@/store/modules/auth';

const { hasAuthSync, getUserButtonPermissions } = useAuth();
const authStore = useAuthStore();

const userInfo = ref<any>({});
const userButtons = ref<string[]>([]);
const debugInfo = ref<string>('');

onMounted(async () => {
  // 获取用户信息
  userInfo.value = authStore.userInfo;

  // 获取用户按钮权限
  try {
    userButtons.value = await getUserButtonPermissions();
    debugInfo.value = `用户角色: ${JSON.stringify(userInfo.value.roles)}\n用户按钮权限: ${JSON.stringify(userButtons.value)}`;
  } catch (error) {
    debugInfo.value = `获取权限失败: ${error}`;
  }
});

// 测试权限检查
const testPermissions = [
  'USER_ADD',
  'USER_EDIT',
  'USER_DELETE',
  'TENANT_ADD',
  'TENANT_EDIT',
  'TENANT_DELETE',
  'MENU_ADD',
  'MENU_EDIT',
  'MENU_DELETE',
  'ROLE_ADD',
  'ROLE_EDIT',
  'ROLE_DELETE'
];
</script>

<template>
  <div class="p-6">
    <h1 class="mb-6 text-2xl font-bold">按钮权限测试页面</h1>

    <div class="mb-6">
      <h2 class="mb-2 text-lg font-semibold">用户信息</h2>
      <pre class="rounded bg-gray-100 p-4">{{ JSON.stringify(userInfo, null, 2) }}</pre>
    </div>

    <div class="mb-6">
      <h2 class="mb-2 text-lg font-semibold">用户按钮权限</h2>
      <pre class="rounded bg-gray-100 p-4">{{ JSON.stringify(userButtons, null, 2) }}</pre>
    </div>

    <div class="mb-6">
      <h2 class="mb-2 text-lg font-semibold">权限检查结果</h2>
      <div class="grid grid-cols-2 gap-4">
        <div v-for="permission in testPermissions" :key="permission" class="border rounded p-4">
          <div class="font-medium">{{ permission }}</div>
          <div class="text-sm">
            hasAuthSync:
            <span :class="hasAuthSync(permission) ? 'text-green-600' : 'text-red-600'">
              {{ hasAuthSync(permission) ? '✅ 有权限' : '❌ 无权限' }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="mb-6">
      <h2 class="mb-2 text-lg font-semibold">调试信息</h2>
      <pre class="whitespace-pre-wrap rounded bg-gray-100 p-4">{{ debugInfo }}</pre>
    </div>

    <div class="mb-6">
      <h2 class="mb-2 text-lg font-semibold">权限按钮测试</h2>
      <div class="space-y-2">
        <button v-if="hasAuthSync('USER_ADD')" class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
          新增用户 (需要 USER_ADD 权限)
        </button>
        <button v-if="hasAuthSync('USER_EDIT')" class="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600">
          编辑用户 (需要 USER_EDIT 权限)
        </button>
        <button v-if="hasAuthSync('USER_DELETE')" class="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
          删除用户 (需要 USER_DELETE 权限)
        </button>
        <div
          v-if="!hasAuthSync('USER_ADD') && !hasAuthSync('USER_EDIT') && !hasAuthSync('USER_DELETE')"
          class="text-gray-500"
        >
          您没有用户管理权限
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
